<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-typeahead</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link href="../dialog/prism/prism.css" rel="stylesheet" />
<link href="../bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label">html属性渲染字符串数组</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" autocomplete="off" placeholder="请输入编程语言"
                   data-provide="typeahead"
                   data-source='["java" , "javascript" , "html" , "xml" , "css" , "sql" , "pascal" , "c#" , "c"]'
            />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">html属性渲染对象数组</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"
                   data-provide="typeahead" data-source='[{"id":"1" , "name":"java"},{"id":"2" , "name":"javascript"},
                   {"id":"3" , "name":"sql"},{"id":"4" , "name":"abcdefghijklmnopqrstuvwxyz"}]'
                   autocomplete="off" placeholder="请输入编程语言" />
        </div>
    </div>
    <div class="form-group">
        <label for="basic_text_id" class="col-sm-2 control-label">js渲染</label>
        <div class="col-sm-10">
            <input type="text" id="basic_text_id" class="form-control" autocomplete="off" placeholder="请输入编程语言" />
        </div>
    </div>
    <div class="form-group">
        <label for="basic_text_id" class="col-sm-2 control-label"><b>ajax复杂应用</b></label>
        <div class="col-sm-10">
            <input type="text" id="ajax_text_id" class="form-control" autocomplete="off" placeholder="请输入字母数字" />
            <input type="hidden" id="ajax_hidden_id" />
        </div>
    </div>
</form>

<hr/>
本页面源代码为：
<pre class="language-html line-numbers" data-src="index.html"></pre>
<hr/>
复杂示例数据源：
<pre  class="language-json line-numbers" data-src="example.json"></pre>
<hr/>

<script src="../jquery/jquery.min.js"></script>
<script src="../popper.min.js"></script>
<script src="../bootstrap.min.js"></script>
<script src="js/bootstrap3-typeahead.min.js"></script>
<script src="../dialog/prism/prism.js"></script>
<script type="text/javascript">
//运行js函数
function runCode(codeId){
    var code = document.getElementById(codeId).innerText;
    eval(code);
}
$(function(){
    $('#basic_text_id').typeahead({
        autoSelect: false,
        source: function(query, process) {
            return process(["java" , "javascript" , "html" , "xml" , "css" , "sql" , "pascal" , "c#" , "c"]);
        }
    });
    //ajax 方式的负责应用
    $('#ajax_text_id').typeahead({
        autoSelect: false,//自动选择
        items: 10,//下拉选项个数
        fitToElement: false,
        delay: 500,//延迟毫米
        //minLength: 0,//最小触发请求的文本长度
        //高亮格式化
        highlighter: function (item) {
            var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
            return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '<strong style="color: red;">' + match + '</strong>'
            });
        },
        //选中项后触发
        afterSelect: function (item) {
            //选择项为未找到
            $('#ajax_text_id').val(item.text);
            //实际值
            $("#ajax_hidden_id").val(item.userName);
            if(item.text != ""){
                alert("选中项：名称=" + item.name + "，年龄=" + item.age + "，性别=" + item.sex);
            }
        },
        //发送ajax
        source: function (query , process) {
            $.ajax({
                url: "example.json",
                success: function (result) {
                    //----------------此部分代码不为实际代码
                    var exist = false;
                    for(var i=0 , lens = result.length ; i < lens ; i++) {
                        var value = result[i].userName.toLowerCase();
                        if(value.indexOf(query.toLowerCase()) != -1){
                            exist = true;
                            break;
                        }
                    }
                    //----------------此部分代码不为实际代码
                    if(result.length == 0 || exist == false){
                        return process([{"text" : "" , "name": "未找到包含 " + query + " 的数据"}]);
                    }

                    var list = result.map(function (item) {
                        var data = {"name": item.userName , "age": item.age , "sex": item.sex , "text" : item.userName};
                        return data;
                    });
                    return process(list);
                },
                error: function () {
                    return process([{"text" : "" , "name": "未找到包含 " + query + " 的数据"}]);
                }
            });
        }
    });
});
</script>
</body>
</html>